<template>
	<view class="carousel">
		<swiper
			@change="changeItem"
			:circular="true"
			:autoplay="false"
			:interval="3000"
		>
			<swiper-item v-for="item in bannerList" :key="item.id">
				<navigator
					url="/pages/index/index"
					hover-class="none"
					class="navigator"
				>
					<image mode="aspectFill" class="image" :src="item.imgUrl"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 指示点 -->
		<view class="indicator">
			<text
				v-for="(item, index) in bannerList"
				:key="item.id"
				class="dot"
				:class="{ active: index === activeIndex }"
			></text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		bannerList: Array,
	},
	data() {
		return {
			activeIndex: 0,
		}
	},
	methods: {
		changeItem(e) {
			// console.log(e)
			this.activeIndex = e.detail.current // 赋值切换之后的index
		},
	},
}
</script>

<style lang="scss">
:host {
	display: block;
	height: 280rpx;
}

/* 轮播图 */
.carousel {
	height: 100%;
	position: relative;
	overflow: hidden;
	transform: translateY(0);
	background-color: #efefef;

	swiper {
		height: 100%;
	}

	.indicator {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 16rpx;
		display: flex;
		justify-content: center;

		.dot {
			width: 30rpx;
			height: 6rpx;
			margin: 0 8rpx;
			border-radius: 6rpx;
			background-color: rgba(255, 255, 255, 0.4);
		}

		.active {
			background-color: #fff;
		}
	}

	.navigator,
	.image {
		width: 100%;
		height: 100%;
	}
}
</style>
